<template>
  <view class="unify-breadcrumb">
    <view class="unify-breadcrumb-item" v-if="prefixText">
      {{prefixText}}
    </view>

    <view class="unify-breadcrumb-item" v-for="(item,index) in list">
      <view class="unify-breadcrumb-item-pd" :class="{'unify-breadcrumb-item-link':index != list.length - 1}" @click="clickItem(index)">
        {{item[textName]}}
      </view>
      <text class="unify-breadcrumb-item--separator">{{ separator }}</text>
    </view>
  </view>
</template>

<script>
  import BreadcrumbItem from './breadcrumb-item.vue';
  export default {
    components: {
      BreadcrumbItem
    },
    options: {
      virtualHost: true
    },
    props: {
      prefixText: {
        type: String,
      },
      textName: {
        type: String,
      },
      list: {
        type: Array,
        default () {
          return []
        }
      },
      separator: {
        type: String,
        default: '->'
      },
    },
    provide() {
      return {
        uniBreadcrumb: this
      }
    },
    methods: {
      clickItem(index) {
        this.$emit("clickItem", index)
      }
    }
  }
</script>
<style lang="scss">
  .unify-breadcrumb {
    display: flex;
  }

  $uni-primary: #2979ff !default;
  $uni-base-color: #6a6a6a !default;
  $uni-main-color: #3a3a3a !default;

  .unify-breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 14px;
    color: $uni-base-color;

  
    
    &-pd {
      padding: 0 10px;
    }

    &-link {
      
      color: $uni-main-color;
      font-weight: bold;
      /* #ifndef APP-NVUE */
      cursor: pointer;
      /* #endif */

      &:hover {
        color: $uni-primary;
      }
    }

    &--separator {
      font-size: 12px;
      color: $uni-base-color;
    }

    &:first-child {
      padding-left: 0;
    }

    &:last-child &--separator {
      display: none;
    }
  }
</style>